<template>
  <div>
    <h1>Vue常用指令</h1>
    <h3>v-bind指令: 属性绑定指令(记住了）。行内， v-modle：行外</h3>
    <h3>说明：v-bind指令可以简写为:</h3>
    <h3>v-od指令：事件指令。</h3>
    <h3>说明: v-on 指令可以简写为@就可以了</h3>

    <div>
        <input v-bind:type="a"><br>
        <input :type="a"><br>
    </div>

    <hr>
    <div>
        <a v-bind:href="c">百度一下</a><br>
        <a :href="c">百度一下</a>
    </div>

   <hr>
   <div>
   <input v-bind:type="b"><br>
   <input :type="b">
   </div>

   <div>
    <button v-on:click="m1()">单击</button> <br>
    <!-- <button @click="m1()">单击</button>
     -->
    <button v-on:dbclick="m2()">双击</button><br>
     <button @mouseover="m3()">鼠标</button><br>
     <input type="text" v-on:keyup="m4()">
   </div>
    
    <div>
        {{d}}
    </div>
   
   <hr>
   <div>
    <button @click="m5()">按钮一</button>
     <button @click="m6">按钮二</button>
   </div>
    <div>
        {{e}}
    </div>
  </div>
</template>

<script>
export default {
        name:'G',
        data(){
            return {
                a:'text',
                b:'date',
                c:'http://www.baidu.com',
                d:1,
                e:100,
            }
        },
        methods: {
            m1(){
              this.d +=1
            },
            m2(){
             this.d -- 
            },
             m3(){
               this.d +=2
            },
            m4(){
              this.d -=2
            },
            m5(){
              this.e ++
            },
            m6(){
             this.e -=2
            }
        },
}
</script>

<style>

</style>